<template>
    <div class="root">
        <div class="header">
            <div class="back-icon" @click="returnLast">
                <van-icon name="arrow-left" color="white" size="28px"/>
            </div>
            <div class="notice-text">
                <span>关于时间胶囊</span>
            </div>
        </div>
        <div class="about-wrapper">
            <div class="title">
                <span>关于时间胶囊</span>
            </div>
            <div class="sub-title">
                <span>----&nbsp;&nbsp;时间的礼物，由你亲手酝酿</span>
            </div>
            <div class="main-content">
                <div class="every-line">
                    不知道你的生命中有没有这样的瞬间：<br>
                </div>
                <div class="every-line">
                    人世浮沉许多年，翻到几张老照片；<br>
                </div>
                <div class="every-line">
                    心血来潮整理房间，发现一些当年的小物件；<br>
                </div>
                <div class="every-line">
                    或是翻阅从前的书籍，看见上面的涂鸦和笔记……<br>
                </div>
                <div class="every-line">
                    这些可爱的瞬间，浪漫的瞬间，动人的瞬间，穿越漫长的时空岁月，在某时某刻终于奇迹而命中注定般地同你相遇。<br>
                </div>
                <div class="every-line">
                    我们是时间胶囊，或者可以说，我们是你专属的时空邮递员。在这里，我们希望同你一起埋下时间的种子，静待其开花结果；在这里，我们希望时间的虚无不再是阻隔，一切对话、纪念、祝福，我们都一定按约定为你送达……<br>
                </div>
                <div class="every-line">
                    感谢你使用时间胶囊，期待未来在不同的时空与浪漫中同你会面。
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const returnLast = () => {
    router.go(-1);
}

</script>

<style lang="less" scoped>
    .root {
        background-color: #55ccc9;
        display: flex;
        flex-direction: column;
        position: fixed;
        height: 100%;
        width: 100%;
        .header {
            display: flex;
            padding-top: 20px;
            padding-left: 20px;
            .notice-text {
                margin-left: 4px;
                line-height: 28px;
                color: white;
                font-size: 18px;
            }
        }
        .about-wrapper {
            width: 70%;
            position: relative;
            margin: 0 auto;
            margin-top: 25px;
            color: rgb(255, 255, 255);
            background-color: #fff;
            border-radius: 10px;
            padding: 15px 25px;
            background: linear-gradient(to right bottom, rgba(129, 125, 125, 0.2), rgba(129, 125, 125, 0.1));
            z-index: 1;
            box-shadow: 2px 2px 6px rgba(129, 125, 125, 0.3);
            .title {
                text-align: center;
                font-size: 18px;
            }
            .sub-title {
                text-align: end;
                font-size: 14px;
                margin-top: 5px;
            }
            .main-content {
                margin-top: 5px;
                line-height: 25px;
                .every-line {
                    font-size: 14px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>